<script>
    import { getContext } from 'svelte'
    import { onMount } from 'svelte';

    export let page;
    export let handler;

    let pages = Math.ceil(page.total / page.size);
    let toPageNum = page.page;
    let activePage = page.page;

    let pagination = [];

    function setPagination() {
        activePage = 1;
        if (pages > 6) {
            pagination = [1,2,3,4,5,6]
        } else {
            let _pages = []
            for (let item = 1; item <= pages; item ++) {
                _pages.push(item)
                pagination = _pages;
            }
        }
        setNowPage(1)
    }

    function setNowPage (pageNumber) {
        activePage = pageNumber
        upActigePage()
        handler(activePage);
    }

    function flipOver(e) {
        let type = e.target.dataset.type;

        if (type == 'add' && activePage < pages) {

            activePage++
        } else if (type == 'minus' && activePage > 1){
            activePage--
        }

        upActigePage()
        handler(activePage);
    }

    function upActigePage() {
        if (pages <= 6) return false;

        let nowIdx = pagination.indexOf(activePage);
        if (nowIdx >= 4) {
            let _pagination = []
            pagination.forEach(item => {
                _pagination.push(nowIdx == 4 ? item + 1 : item+2)
            })

            if (_pagination[5] > pages) {
                _pagination = []
                for(let item = pages - 5; item <= pages; item++) {
                    _pagination.push(item);
                }

            }
            pagination = _pagination
        } else if (nowIdx <= 1) {
            let _pagination = []
            pagination.forEach(item => {
                _pagination.push(nowIdx == 1 ? item - 1 : item - 2)
            })

            // 如果超出最小范围0，则重置为最小范围页码范围1-6；
            if (_pagination.indexOf(0) !== -1) {
                _pagination = [1,2,3,4,5,6]
            }
            pagination = _pagination
        }
    }

    function endPage() {
        if (pages <= 6) {

        } else {
            let _pagination = []
            for(let item = pages - 5; item <= pages; item++) {
                _pagination.push(item);
            }
            pagination = _pagination
        }
        activePage = pages;
        handler(activePage);
    }

    function toPage() {
        if (toPageNum > 0 && toPageNum <= pages) {
            if (pages > 6 && toPageNum > 6) {
                let _pagination = []
                for(let item = toPageNum - 3; item <= toPageNum * 1 + 2; item++) {
                    _pagination.push(item);
                }
                if (_pagination[5] > pages) {
                    _pagination = []
                    for(let item = pages - 5; item <= pages; item++) {
                        _pagination.push(item);
                    }

                }
                pagination = _pagination

            } else {
                pagination = [1, 2, 3, 4, 5, 6]
            }

            activePage = toPageNum * 1;
        }
        handler(activePage);
    }
    // const query = getContext('someKey')
    onMount(() => {
        // console.log('444444')
       setPagination()
    })
</script>

<div class="view">
    <button class="button page-item" on:click={setPagination}>首页</button>

    <span class="page-item icon-box" data-type='minus' on:click={flipOver}>
        <img src="images/htb－Arrow right02 (1).png" data-type='minus' class="icon" alt="">
    </span>
    {#each pagination as item, i}
    <button
        on:click={setNowPage(item)}
        class="{activePage == item ? 'button page-item is-success' : 'button page-item'}">{item}</button>
    {/each}
    <span class="page-item icon-box" data-type='add' on:click={flipOver}>
        <img src="images/htb－Arrow right02.png" data-type='add' class="icon" alt="">
    </span>

    <button class="button page-item" on:click={endPage}>末页</button>

    <div class="goPage page-item">
        <span>到第</span>
        <input type="text" bind:value={toPageNum} class="input is-small page-item">
        <span>页</span>
    </div>

    <button class="page-item button is-success" on:click={toPage}>搜索</button>
</div>

<style lang="scss">
    .view {
        display: flex;

        .button {
            display: flex;
            align-items: center;
        }

        .page-item {
            display: inline-block;
            text-align: center;
            border:1px solid rgba(62, 68, 100, 1);
            border-radius:2px;
            font-size: 12px;
            padding: 3px 10px;
            height: 25px;
            box-sizing: border-box;
            margin-right: 4px;
            user-select: none;
            cursor: pointer;
        }

        .is-success {
            border:none;
            background-color: #318AFD;
        }

        .icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
                width: 16px;
                height: 16px;
            }
        }

        .goPage {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 18px 0 28px;

            span {
                flex-shrink: 0;
            }

            .input {
                width: 49px;
                margin: 0 10px;
            }
        }
    }

</style>
